<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>

</head>
<body>
<div id="test"></div>
</body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<!--将jsx转为js-->
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<!--babel  由babel转换jsx-->
<script type="text/babel">
    /*
    * 高阶函数：如果一个函数符合下面2个规则中的任何一个，那该函数为高阶函数
    *   1.若A函数，接受的参数是一个函数，那么A就可以称之为高阶函数
    *   2.若A函数，调用的返回值依旧是一个函数，那么A就可以称之为高阶函数
    *   常见的高阶函数：Promise、setTimeout、setInterval、arr.map等等
    * 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码方式
    * */
    class Login extends React.Component {
        state = {
            username: '',
            password: ''
        }
        showData = (e) => {
            e.preventDefault()
            alert(this.state.username + '' + this.state.password)
        }
        saveFormData = (typeData) => {
            return (e) => {
                this.setState({
                    [typeData]: e.target.value
                })
            }
        }

        render() {
            return (
                <form onSubmit={this.showData}>
                    用户名：<input onChange={this.saveFormData('username')} name='username' type="text"
                               placeholder="用户名"/>&nbsp;
                    密码：<input onChange={this.saveFormData('password')} name='password' type="password"
                              placeholder="密码"/>&nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login/>, document.getElementById('test'))
</script>
</html>